<template>
  <div id="assign">
    <el-button size="mini" type="primary" icon="el-icon-edit" @click="to">派单</el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'派单'" width="680px">
      <el-form ref="form" :model="value" :inline="true" :rules="rules" size="small" label-width="80px">
      <el-form-item label="服务等级" prop="serviceLevel">
        <el-select v-model="value.serviceLevel" clearable class="filter-item">
          <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.label" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型" >
        <el-select v-model="value.faultType" clearable class="filter-item">
          <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.label" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="服务商" prop="supplier">
        <el-select v-model="value.supplier" clearable class="filter-item">
          <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定合同" >
        <!-- <el-input v-model="value.contractId" style="width: 200px;"/> -->
        <el-select v-model="value.contractId" clearable class="filter-item">
          <el-option v-for="item in contractOptions" :key="item.id" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上门时间" prop="addriveTime">
        <el-date-picker
            v-model="value.addriveTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务时长" prop="serviceTime">
        <el-input-number v-model.number="value.serviceTime" :min="0" :max="999" controls-position="right" style="width: 200px;"/>
        <!-- <el-date-picker
            v-model="value.serviceTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker> -->
      </el-form-item>
      <!-- <el-form-item label="指派人" prop="assignOperator">
        <el-input v-model="value.assignOperator" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="指派时间" prop="assignTime">
        <el-date-picker
            v-model="value.assignTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="接单人" >
        <el-input v-model="value.acceptOperator" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="接单时间" >
        <el-date-picker
            v-model="value.acceptTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="工程师" >
        <el-input v-model="value.engineer" style="width: 200px;"/>
      </el-form-item> -->
      <el-form-item label="所需工具" >
        <el-input v-model="value.requireTool" style="width: 450px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="value.notes" style="width: 450px;" rows="5" type="textarea"/>
      </el-form-item>
    </el-form>
    <div style="text-align: right">
        <el-button :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
        <el-button type="text" @click="cancel">取消</el-button>
    </div>
    </el-dialog>
    
  </div>
</template>

<script>
import request from '@/utils/request'
import { add, edit } from '@/api/tWorkOrder'
import { get } from '@/api/dictDetail'
export default {
  name: "OrderInfo",
  props: {
    data: {
      type: Object,
      required: true
    },
    sup_this: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      serviceLevelOptions:[],
      faultTypeOptions:[],
      supplierOptions:[],
      contractOptions:[],
      value: {
        id: '',
        serviceLevel: '',
        contractId: '',
        faultType: '',
        supplier: '',
        addriveTime: '',
        serviceTime: '',
        requireTool: '',
        notes: '',
        assignOperator: '',
        assignTime: '',
        acceptOperator: '',
        status: '200',
        acceptTime: '',
      },
      rules: {
        serviceLevel: [
          { required: true, message: '请选择服务等级', trigger: 'blur' }
        ],
        supplier: [
          { required: true, message: '请选择服务商', trigger: 'blur' }
        ],
        addriveTime: [
          { required: true, message: '请选择上门时间', trigger: 'blur' }
        ],
        serviceTime: [
          { required: true, message: '请选择服务时长', trigger: 'blur' }
        ],
        assignOperator: [
          { required: true, message: '请选择派单人', trigger: 'blur' }
        ],
        assignTime: [
          { required: true, message: '请选择派单时间', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // 加载数据字典
    this.getDict("fault_type")
    this.getDict("service_level")
    this.getSupplier()
  },
  methods: {
    async getDict(name) {
      return new Promise((resolve, reject) => {
        get(name).then(res => {
          if(name=='fault_type'){
            const content = [].concat(res.content);
            const _this = this
            content.forEach(function(data, index) {
              const faultTypeOption = {id: data.id,name: data.lable}
              _this.faultTypeOptions.push(faultTypeOption)
            })
          }
          else {
            const content = [].concat(res.content);
            const _this = this
            content.forEach(function(data, index) {
              const serviceLevelOption = {id: data.id,name: data.lable}
              _this.serviceLevelOptions.push(serviceLevelOption)
            })
          }
            
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    to() {
      this.value.id = this.data.id
      this.dialog = true
    },
    getSupplier() {
       request({
          url: 'api/tServiceproviderInfoAll',
          method: 'get'
        }).then(res => {
          const content = [].concat(res);
          const _this = this
          content.forEach(function(data, index) {
              const supplierOptions = {id: data.id,name: data.seproRefeName}
              _this.supplierOptions.push(supplierOptions)
            })
        }).catch(err => {
          console.log(err)
        })  
    },
    cancel() {
      this.resetForm()
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          const _this = this
          request({
            url: 'api/tWorkOrder/assign',
            method: 'post',
            data:_this.value
          }).then(res => {
            this.resetForm()
            this.$notify({
              title: '派单成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.sup_this.init()
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.value = {
        id: '',
        serviceLevel: '',
        contractId: '',
        faultType: '',
        supplier: '',
        addriveTime: '',
        serviceTime: '',
        requireTool: '',
        notes: '',
        assignOperator: '',
        assignTime: '',
        acceptOperator: '',
        acceptTime: '',
      }
    },
  }
}
</script>

<style scoped>
  #assign{
    display: inline-block;
    margin-right: 3px;
  }
</style>